<template>
  <div ref="net_sec" class="net-sec" style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.net_sec, this.theme);
      let symbolImg1 =
        "image://" + require("@/assets/images/devOps/relate1.png");
      let symbolImg2 =
        "image://" + require("@/assets/images/devOps/relate2.png");
      let symbolImg3 =
        "image://" + require("@/assets/images/devOps/relate3.png");
      let symbolImg4 =
        "image://" + require("@/assets/images/devOps/relate4.png");
      let symbolImg5 =
        "image://" + require("@/assets/images/devOps/relate5.png");
      let data = [
        {
          name: "电子公文 web-01",
          symbol: symbolImg5,
          symbolSize: [180, 140],
          value: [60, 240],
          x: 300,
          y: 400,
        },
        {
          name: "电子公文 web-05",
          x: 400,
          y: 400,
          value: [60, 40],
          symbol: symbolImg4,
          symbolSize: [180, 140],
        },
        {
          name: "电子公文 web-02",
          x: 400,
          y: 400,
          value: [100, 240],
          symbol: symbolImg2,
          symbolSize: [180, 140],
        },
        {
          name: "电子公文 web-0101",
          x: 400,
          y: 400,
          value: [140, 380],
          symbol: symbolImg3,
          symbolSize: [180, 140],
        },
        {
          name: "电子公文 web-0102",
          x: 400,
          y: 400,
          value: [140, 180],
          symbol: symbolImg3,
          symbolSize: [180, 140],
        },
        {
          name: "电子公文 web-04",
          x: 400,
          y: 400,
          value: [10, 40],
          symbol: symbolImg4,
          symbolSize: [180, 140],
        },
      ];

      let option = {
        xAxis: {
          show: false,
          type: "value",
          axisLabel: {
            show: true,
          
              color: "rgba(255,255,255,0.5)",
            
          },
        },
        yAxis: {
          show: false,
          type: "value",
          axisLabel: {
            show: true,
          
              color: "rgba(255,255,255,0.5)",
            
          },
        },
        tooltip: {
          show: true,
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "14%",
          bottom: "14%",
        },
        series: [
          {
            type: "graph",
            zlevel: 2,
            z:2,
            draggable: true,
            coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
            label: {
                show: true,
                position: [30, 120],
                  color: "rgba(255,255,255,0.5)",
                fontSize: 16,
            },
            data: data,
            links: [
              {
                source: "电子公文 web-01",
                target: "电子公文 web-02",
              },
              {
                source: "电子公文 web-02",
                target: "电子公文 web-0101",
              },
              {
                source: "电子公文 web-02",
                target: "电子公文 web-0102",
              },
              {
                source: "电子公文 web-01",
                target: "电子公文 web-05",
              },
              {
                source: "电子公文 web-05",
                target: "电子公文 web-04",
              },
            ],
            lineStyle: {
                opacity: 1,
                color: "#53b5ea",
                curveness: 0.2,
                width: 2,
            },
          },
          {
            type: "lines",
            coordinateSystem: "cartesian2d",
            symbol: symbolImg2,
            z: 1,
            zlevel: 1,
            animation: true,
            effect: {
              show: true,
              period: 8,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: "pin",
              loop: true,
              color: "rgba(55,155,255,0.5)",
            },
            lineStyle: {
                color: "#22AC38",
                width: 2,
                curveness: 0.2,
            },

            data: [
              {
                coords: [
                  [60, 240],
                  [60, 40],
                ],
              },
              {
                coords: [
                  [60, 240],
                  [100, 240],
                ],
              },
              {
                coords: [
                  [100, 240],
                  [140, 380],
                ],
              },
              {
                coords: [
                  [100, 240],
                  [140, 180],
                ],
              },
              {
                coords: [
                  [60, 40],
                  [10, 40],
                ],
              },
            ],
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData() {
      this.allData = {};
    },
    updateChart() {},
  },
  mounted() {
    this.initChart();
        // 添加随页面变化而变化
    window.addEventListener('resize', () => {
       this.chartInstance.resize()
    })
  },
  destroyed() {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.net-sec {
  width: 100%;
  height: 100%;
}
</style>
